<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    audio {
      margin: 0 auto 30px;
      display: block;
    }

    div {
      width: 300px;
      margin: 0 auto;
      border: 1px solid #333;
      height: 200px;

      position: relative;

      overflow: hidden;
    }

    div > ul {
      position: absolute;
      left: 0;
      top: 100px;
      width: 100%;

      transition: top .2s linear;
    }

    div > ul > li {
      list-style: none;
      height: 20px;
      line-height: 20px;
      text-align: center;

      transition: all .2s linear;
    }

    div > ul > li.active {
      background-color: skyblue;
      color: #fff;
    }
  </style>
</head>
<body>

  <audio src="酒干倘卖无-苏芮.128.mp3" controls></audio>

  <div class="div">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>

  <script src="./苏芮.lrc.js"></script>
  <script>
    // 正则.exec(字符串)
	  // 正则 有g 有()
   	// 第二次捕获会从第一个捕获结束的位置 往后捕获  
  	//     从[1] 开始 依次是每个()的内容 
    // 捕获数据 
    // 准备两个数组 因为一一对应  所以 两个数组索引一样 
    var timeArr=[],lrcArr=[];
    var reg = /\[(\d{2}:\d{2})\.\d{2}\](.+)/g;

    var res = reg.exec(lrc);
    console.log(res)
    while(res!== null){
      timeArr.push(res[1]);
      lrcArr.push(res[2]);
      res = reg.exec(lrc);
    }
   
    // console.log(timeArr);
    // console.log(lrcArr);

    // 把歌词渲染到页面上 ul
    var ul = document.querySelector('ul');
    ul.innerHTML = lrcArr.reduce(function(prev,item){
      return prev + `
        <li>${item}</li>
      `
    },'')

    // 获取audio 当前播放的时间 
    // 需要通过一个timeupdate
    // audio元素.currentTime  获取音频播放时间
    var audioele = document.querySelector('audio');
    audioele.ontimeupdate = function(){
      // console.log(this.currentTime) // 59.815184 秒 

      // 歌词是  'xx:xx'   分秒 
      var duration = Math.floor(this.currentTime);
      // console.log(duration);//
      // 转成分:秒
      var minutes = parseInt(duration / 60);
      var seconds = duration % 60;

      minutes=minutes<10?'0'+minutes:minutes;
      seconds=seconds<10?'0'+seconds:seconds;

      var res = `${minutes}:${seconds}`; // 当前播放时间

      // console.log(res);

      // 让歌词往上动  

      // 歌词的索引是0  ul 的top 100
      // 歌词的索引是1  ul 的top  80 
      // 歌词的索引是2  ul 的top  60 
      // 歌词的索引是3  ul 的top  40 
      // 歌词的索引是4  ul 的top  20 

      //   100 - 索引*20 
      
      // 获取歌词的索引  
      // 歌词索引 跟时间索引 一一对应  
      // 已知当前播放时间  从数组中获取该时间的索引 
      var index = timeArr.indexOf(res);
      if(index == -1){  // 如果不存在 什么也不做
          return 
      }

      // 存在  

      // 存在就更改ul的top
      ul.style.top =100 - index*20 + 'px';

      for(var i=0;i<ul.children.length;i++){
        ul.children[i].classList.remove('active');

      }
      ul.children[index].classList.add('active');



    }
  </script>
  </body>

  </html>